<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center ">
        <div class="main-left2">
          <div class="con2">
          <ul class="nav-menu">
            <li class="cur"  @click="goCourse()"> 全部课程 <i></i></li>
            <li  @click="goCollect()">我的收藏 <i></i></li>
          </ul>

            <div class="clear"></div>
            <div class="filter">
              <dl><dt><i>*</i>备课标题：</dt><dd class="cur">国学动画</dd><dd>国学课程</dd><dd>国学欣赏</dd><dd>诗词鉴赏</dd><dd>书画赏析</dd></dl>
              <dl><dt><i>*</i>备课班级：</dt><dd style="margin-top: 0px; margin-left: 2px;">
                <el-select
                  style="width: 100%; height: 36px;"
                  v-model="value"
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </dd></dl>
              <dl><dt><i>*</i>课件选择:</dt><dd>已添加8个资源，拖动缩略图进行排序</dd></dl>
            </div>
            <ul class="c-list"  @click="goDetail()">
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect   fr"> 收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type2 ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type2  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect   fr"> 收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li> <li>
              <div class="pic_area"><img src="static/img/pic.jpg"></div>
              <p><span class="tit">孝敬父母</span><label class="collect   fr"> 收藏</label></p>
              <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
            </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li>
              <li>
                <div class="pic_area"><img src="static/img/pic.jpg"></div>
                <p><span class="tit">孝敬父母</span><label class="collect cur fr">已收藏</label></p>
                <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
              </li> <li>
              <div class="pic_area"><img src="static/img/pic.jpg"></div>
              <p><span class="tit">孝敬父母</span><label class="collect   fr"> 收藏</label></p>
              <p><label class="viewnum mr20 ">9999</label> <label class="collectnum mr20 ">1.2W</label> <label class="type1  ">音频</label></p>
            </li>

            </ul>

            <div class="page-area">
              <span type="button" class="btn-home fl">首页</span>
              <el-pagination
                background
                layout="  prev, pager, next "
                :total="1000">
              </el-pagination>
              <span type="button"   class="btn-last fr">尾页</span>
            </div>
          </div>

        </div>
        <div class="main-right2">

          <div class="con-menu2"  @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt="">
            </div>
            <div class="menu-item">
              首页
            </div>
          </div>

        </div>
      </div>
    </div>



  </div>
</template>

<script>
import Header from '../../components/header.vue';
export default {
  data() {
    return {
      isOpen:true,
      cateData:[],
      listData:[],
      current: -1,
      categoryId: '',
      currentPage: 1,
      total:0,
      page:1,
      page_size:12};
  },
  created() {
    this.getCategory();
    this.handleCurrentChange(1);
  },
  methods: {
    getCategory() {
      this.$api('ziyuan.getKindList', {}).then(res => {
        this.cateData = res.data.data;
      });
    },
    getCatList(id, index, page = 1 ) {
      if (page == 1) {
        this.currentPage = 1;
      } else if (page == this.total) {
        this.currentPage = this.total;
      }
      this.page = page;
      let all_form = {
        token: this.token,
        page: this.page,
        limit: this.page_size,
        id: this.categoryId
      };
      this.$api('ziyuan.getZiyuanList', all_form).then(res => {
        this.listData = res.data.data;
        this.total = res.data.last_page;
      });
    },
    handleCurrentChange(e) {
      //console.log(e);
      this.currentPage = e;
      this.getCatList(this.categoryId, this.current, e );
    },
    goDetail(){
      this.$router.push("/courseDetail");
    },
    goCourse(){
      this.$router.push("/courseList");
    },
 goCollect(){
  this.$router.push("/courseCollect");
}
  },
  components:{Header}
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
